<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>社区购物</el-breadcrumb-item>
      <el-breadcrumb-item>
        商品详情 / {{$route.params.goodId}}
        <el-button size="mini" type="primary" @click="$router.go(-1)">返回</el-button>
      </el-breadcrumb-item>
    </el-breadcrumb>

    <br >
    <el-row class="margintop20" v-if="detail">
      <el-col :span="8" :offset="1">
        <img :src="detail.img" alt="" class="boximg" />
      </el-col>
      <br>
      <el-col :span="8" :offset="1" style="font-size:14px">
           <br>
        <el-link>{{detail.name }}</el-link>
         <br>
        <p style="color:#67C23A">分类 : {{detail.type.text}}</p>
        <h6>
          单价:
          <span style="color:#F56C6C">¥ {{detail.price }}</span>
        </h6>
        <h6>
          折扣:
          <span style="color:#303133">{{detail.discount }}</span>
        </h6>
        <br>
        <div class="margintop20">
          <span style="color:#303133">购买数量:</span>
          <el-input-number v-model="count" :min="1"></el-input-number>
        </div>
        <br>
        <div class="margintop20">
          <el-button type="success" size="mini" @click="addToshopcar">加入购物车</el-button>
          <el-button type="danger" size="mini" @click="gotobuygood">查看我的商品(购买)</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { getgoodone, addtocartajax } from "@/api";
export default {
  data() {
    return {
      detail: null,
      count: 1,
    };
  },
  methods: {
    gotobuygood() {
      this.$router.push({ name: "mygood" });
    },
    addToshopcar() {
      addtocartajax({
        goodId: this.$route.params.goodId,
        good: this.detail,
        count: this.count,
      }).then((res) => {});
    },
  },
  mounted(){
      getgoodone({
          _id:this.$route.params.goodId
      })
      .then(res=>{
          if(res.type){
              this.detail = res.result;
          }
      })
  }
};
</script>

<style lang="scss" scoped>
.boximg{
    height:300px;
    width:100%;
}
</style>